<template>
  <div id="container" />
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: 'c2eebe4416afc5bc3b425a43a3045bf0'
}
export default {
  data() {
    return {
      map: null,
      mouseTool: null,
      overlays: [],
      auto: null,
      placeSearch: null
    }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: 'a4f3b4a895084e9d1a3b10c9dcd04795',
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 初始化地图
          this.map = new AMap.Map('container', {
            viewMode: '2D', //  是否为3D地图模式
            zoom: 13, // 初始化地图级别
            center: [113.65553, 34.748764], // 中心点坐标  郑州
            resizeEnable: true
          })
        })
        .catch((e) => {
          console.log(e)
        })
    },
    mounted() {
      this.initMap()
    }
  }
}
</script>

<style  scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>
